<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, user-scalable=no" />
    <title>写轮眼</title>
<link href="css/写轮眼id.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    .yj {
        width: 600px;
        height: 600px;
        border: 10px solid #000000;
        border-radius: 500px;
        transition: all 50s;
        display: flex;
        margin: 0 auto;
        background: red;
        position: absolute;
        z-index: -1;
        /* top: 50px;
        left: 550px; */
		
		left: 0;
		right: 0;
		margin: 60px auto;
    }
    
    .yb {
        width: 500px;
        height: 500px;
        border: 1px solid #ff2020;
        border-radius: 500px;
        transition: all 10s;
        display: flex;
        margin: 0 auto;
        background: linear-gradient(#ff2020 50%, #ff2020 50%);
        position: absolute;
        top: 50px;
        left: 50px;
    }
    
    .tk {
        width: 100px;
        height: 100px;
        border: 1px solid #000000;
        border-radius: 200px;
        transition: all 5s;
        display: flex;
        margin: 0 auto;
        background: #000000;
        position: absolute;
        z-index: 1;
        top: 250px;
        left: 250px;
    }
    
    .huang {
        width: 300px;
        height: 300px;
        border: 5px solid #000000;
        border-radius: 200px;
        transition: all 5s;
        display: flex;
        margin: 0 auto;
        position: absolute;
        z-index: 1;
        top: 145px;
        left: 145px;
    }
    
    .gy-w {
        width: 150px;
        height: 150px;
        border: 1px solid #ff2020;
        border-radius: 200px;
        transition: all 5s;
        display: flex;
        align-items: center;
        margin: 0 auto;
        background: linear-gradient(#ff2020 50%, #000000 50%);
        position: absolute;
        transform: rotate(160deg);
        z-index: 1;
        top: 30px;
        left: 200px;
    }
    
    .hei-w,
    .hong-w {
        width: 20px;
        height: 20px;
        border-radius: 50%;
    }
    
    .hei-w {
        border: 28px solid #ff2020;
        background: #ff2020;
    }
    
    .hong-w {
        border: 28px solid #000000;
        background: #000000;
    }
    /*2*/
    
    .gy-t {
        width: 150px;
        height: 150px;
        border: 1px solid #ff2020;
        border-radius: 200px;
        transition: all 5s;
        display: flex;
        align-items: center;
        margin: 0 auto;
        background: linear-gradient(#ff2020 50%, #000000 50%);
        position: absolute;
        transform: rotate(45deg);
        z-index: 1;
        top: 230px;
        left: 30px;
    }
    
    .hei-t,
    .hong-t {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        z-index: 1;
    }
    
    .hei-t {
        border: 28px solid #ff2020;
        background: #ff2020;
        z-index: 3;
    }
    
    .hong-t {
        border: 28px solid #000000;
        background: #000000;
        z-index: 3;
    }
    /*3*/
    
    .gy-s {
        width: 150px;
        height: 150px;
        border: 1px solid #ff2020;
        border-radius: 200px;
        transition: all 5s;
        display: flex;
        align-items: center;
        margin: 0 auto;
        background: linear-gradient(#ff2020 50%, #000000 50%);
        position: absolute;
        transform: rotate(-90deg);
        z-index: 1;
        top: 280px;
        left: 290px;
    }
    
    .hei-s,
    .hong-s {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        z-index: 1;
    }
    
    .hei-s {
        border: 28px solid #ff2020;
        background: #ff2020;
        z-index: 3;
    }
    
    .hong-s {
        border: 28px solid #000000;
        background: #000000;
        z-index: 3;
    }
    
    .yb:hover {
        transform: rotate(-2880deg);
        transition: all 2880s;
    }
</style>

<body>
    <div class="yj">
        <div class="yb" id="yb">
            <div class="gy-w">
                <div class="hei-w"></div>
                <div class="hong-w"></div>
            </div>
            <div class="gy-t">
                <div class="hei-t"></div>
                <div class="hong-t"></div>
            </div>
            <div class="gy-s">
                <div class="hei-s"></div>
                <div class="hong-s"></div>
            </div>

        </div>
        <div class="huang"></div>
        <div class="tk"></div>
    </div>
</body>


	

</html>